<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>SolutionItem Detail</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../resources/css/mui.css">
		<link rel="stylesheet" href="../../resources/css/style.css">
		<link rel="stylesheet" href="../../resources/css/solution/pdp.css">
		<script src="../../resources/assets/mui.js"></script>
		<script src="../../resources/assets/avalon.js"></script>
		<script src="../../resources/assets/jquery-2.0.3.min.js"></script>
		<script src="../../resources/assets/mui.zoom.js"></script>
		<script src="../../resources/assets/mui.previewimage.js"></script>
		<script src="../../resources/js/lang/en.js"></script>
		<script src="../../resources/js/dahua.config.js"></script>
		<script src="../../resources/js/common.js"></script>
		<script src="../../resources/js/solution/item.js"></script>
	</head>

	<body ms-controller="itemPage">
		
		<input type="hidden" value="" id="uid"/>
		
		<!--头部-->
		<header class="mui-bar mui-bar-nav header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-icon-white"></a>
			<h1 id="title" class="mui-title">
				{solutionitem.title}
			</h1>
			<a class="mui-icon mui-pull-right mui-icon-white home" href="../product/category.html">
				<i class="icon icon_home"></i>
			</a>
		</header>

		<div id="item" class="mui-content mui-scroll-wrapper whitebg">
			<div class="mui-scroll" >
				<div class="mui-row">
					<!--description-->
					<div class="mui-card" ms-if="@solutionitem.description!='' && @solutionitem.description!=null">
						<div id="description" class="mui-card-content mui-content-padded"></div>
					</div>
					
					<!--Product Showcase-->
					<div class="mui-col-xs-12 sd_box2" ms-if="@solutionitem.productList.length>0">
						<h3>Product Showcase</h3>
						<ul class="mui-table-view mui-grid-view products">
							<li class="mui-table-view-cell mui-media mui-col-xs-4" ms-for='(i,product) in @solutionitem.productList'>
								<a href="../product/pdp.html" ms-attr="{'data-id': @product.id}">
									<img class="mui-media-object" ms-attr="{src: @product.image}">
									<div class="mui-media-body">{product.partnumber}</div>
								</a>
							</li>
						</ul>
						<script>
							mui('.products').on('tap', 'a', function(e) {
								var id = this.getAttribute('data-id');
								var url = this.getAttribute('href');
								mui.openWindow({
									url: url + "?id=" + id
								});
							});
						</script>
			
					</div>
					
				</div>
			</div>
		</div>
		
		

		<!--底部导航
		<footer class="mui-bar mui-bar-tab footer">
			<a id="defaultTab" data-id="1" class="mui-tab-item" href="../product/category.html">
				<span class="mui-icon icon icon_product"></span>
				<span class="mui-tab-label">Product</span>
			</a>
			<a class="mui-tab-item mui-active" href="category.html">
				<span class="mui-icon icon icon_solution active"></span>
				<span class="mui-tab-label">Solution</span>
			</a>
			<a id="partner" class="mui-tab-item mui-hidden" href="../partner/index.html">
				<span class="mui-icon icon icon_partner"></span>
				<span class="mui-tab-label">Partner</span>
			</a>
			<a class="mui-tab-item" href="../user/user.html">
				<span class="mui-icon icon icon_usercenter"></span>
				<span class="mui-tab-label">User Center</span>
			</a>
		</footer>
-->
	</body>
	

</html>